import {Card} from 'antd'
// 00 安装 npm i echarts -S
// 01 导入echarts
import * as echarts from 'echarts';
// 导入类型
import { GroupInfoType } from '@/types/index';
// 导入获取团购商品的接口
import {getGroupBuyProduct} from '@/api/channel';
import { useState,useEffect } from 'react';
interface Iprops {
  groupInfo:GroupInfoType
}
function GroupProducts({groupInfo}:Iprops) {
  // 定义商品列表
  const [productList,setProductList] = useState([]);
  // 组件挂载完毕请求数据
  useEffect(() => {
    // 获取商品列表
    getGroupBuyProduct({id:groupInfo.products}).then(res=>{
      if(res.data.code===0){
        // 更新数据
        setProductList(res.data.data)
      }
    })
  }, []);
  // 组件挂载完毕初始化echarts，某个数据更新执行初始化
  useEffect(() => {
    // 初始化echarts
    const myChart = echarts.init(document.getElementById('chartp') as HTMLDivElement,"light"
    );
    // 绘制图表
    myChart.setOption({
      title: { text: '团购信息' },
      tooltip: {},
      legend: {
        data:['原价','现价','佣金']
      },
      xAxis: {
        data:  productList.map((item:any)=>item.productName.slice(0,4)+item.id)
      },
      yAxis: {},
      series: [{
        name: '原价',
        type: 'line',
        data: productList.map((item:any)=>item.salePrice)
      },
      {
        name: '现价',
        type: 'line',
        data: productList.map((item:any)=>item.price)
      },
      {
        name:'佣金',
        type:'bar', 
         data: productList.map((item:any)=>item.rate*100)

      }
    ]
    })
  }, [productList]);

  return ( <div>商品详情
    <Card title="图表信息">
      <div id="chartp" style={{width:'100%',height:'400px'}}></div>
    </Card>
    <p>{JSON.stringify(productList)}</p>
  </div> );
}

export default GroupProducts;